<template>
  <div id="homePage">
    <el-container>
      <el-header style="height:53px">
        <div class="top-right">
          <el-row>
            <el-col :span="16">
              <i class="el-icon-share logo"></i>
              <span class="top-title">客户关系管理系统<span v-if="providerName">-{{providerName}}</span></span>
            </el-col>
            <el-col :span="8" style="text-align: right;font-size:14px;color:#e4e4e4">
              
              <el-dropdown class="top-title-back" style="float:right;display:block">
                <span class="el-dropdown-link" style="color:#e4e4e4;">
                  <!-- <span class="top-head">
                  </span> -->
                  <el-avatar class="top-head" size="small">
                    <svg t="1586483352624" class="icon" style="margin-top:2px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14040" width="20" height="20"><path d="M977.92 856.576V796.16c0-123.904-219.648-157.696-219.648-157.696h-443.392S92.16 672.256 92.16 796.16v60.416s-0.512 45.568 71.168 47.104c71.68 1.536 373.76 0 373.76 0s300.544 1.536 372.224 0 68.608-47.104 68.608-47.104z" fill="#F04D4E" p-id="14041"></path><path d="M614.4 629.76h-76.288l-223.232 4.608S92.16 672.768 92.16 796.672v60.416s-0.512 45.568 71.168 47.104c71.68 1.536 72.192-1.024 72.192-1.024L453.632 737.28H614.4V629.76z" fill="#D84850" p-id="14042"></path><path d="M404.48 501.76h266.24v163.84h-266.24z" fill="#C7928E" p-id="14043"></path><path d="M785.408 268.288S819.2 371.712 727.04 433.664v-185.344l58.368 19.968zM274.432 268.288S256 371.712 332.8 433.664v-185.344l-58.368 19.968z" fill="#333333" p-id="14044"></path><path d="M332.8 249.344v188.928s45.056 162.816 205.824 162.816S742.4 435.2 742.4 435.2v-172.544s10.24-245.76-203.776-245.76S332.8 249.344 332.8 249.344z" fill="#FECCCB" p-id="14045"></path><path d="M537.6 601.088c-158.72 0-204.8-162.816-204.8-162.816v-188.928s-10.24-232.96 204.8-232.96V601.088z" fill="#D8AEAF" p-id="14046"></path><path d="M450.048 150.016S484.352 286.72 801.792 286.72c0 0-5.12-273.408-263.168-273.408s-266.24 273.408-266.24 273.408 108.032-29.184 177.664-136.704z" fill="#2B2B2B" p-id="14047"></path><path d="M399.872 549.376l-84.48 88.064 138.24 102.4L541.184 670.72z" fill="#B6D5D0" p-id="14048"></path><path d="M673.28 549.376L757.76 637.44l-137.728 102.4L531.968 670.72z" fill="#B6D5D0" p-id="14049"></path></svg> 
                  </el-avatar>
                  <span>{{username}}</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handlePerson">个人中心</el-dropdown-item>
                  <el-dropdown-item @click.native="exit">退出系统</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <span class="top-title-back" style="float:right;display:block">
                <el-badge :value="12" slot="reference">
                    <p style="cursor:pointer;"><i class="el-icon-message-solid" style="margin-right:4px"></i>消息</p>
                </el-badge>
              </span> -->
            </el-col>
            
          </el-row>
        </div>
      </el-header>

      <el-container class="bottom-box">
        <el-aside width="230px" id="menu" style="padding-top: 53px;">
          <!-- 一级菜单 -->
          <el-menu 
            unique-opened
            class="icon-vertical-demo firstmenu"
            background-color="#333744"
            text-color="#95a0aa"
            active-text-color="#fff"
            style="text-align:center"
            :default-active="link"
            router
          >
            <div style="overflow-y:auto;overflow-x:hidden;width:110px;height:100%;">
              <div v-for="(item, index) in menu" v-bind:key="index" @click="handleZhuMenu(item)" style="position:relative">
                <i class="el-icon-caret-left arrow-left" :class="curMenu.code == item.code?'displayBlock':'displayNone'"></i>
                <el-menu-item style="overflow:hidden;" :class="curMenu.code == item.code?'curMenuBack':''">
                  <i v-bind:class="item.icon" class="icon element-icons menu-icon"></i>
                  <p class="menu-title" style="">{{item.name}}</p>
                </el-menu-item>
              </div>
            </div>
            
          </el-menu>
          <!-- 二级菜单 -->
          <ul class="submenu-box">
            <li class="submenu-title">
              <i :class="curMenu.icon" class="icon  element-icons"></i>
              <span style="margin-left:5px;">{{curMenu.name}}</span>
            </li>
            <li class="submenu-router" :class="link == item.url?'curSubMenu':''" @click="handleSubmenu(item)" v-for="(item,index) in curMenu.children" :key="index">{{item.name}}</li>
          </ul>
        </el-aside>
        <!-- 内容部分 -->
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right" class="nav-link">
            <!-- <el-breadcrumb-item :to="{ path: '/add' }">首页</el-breadcrumb-item> -->
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{curMenu.name}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{curSubMenu.name}}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <createdDialog :userData="userData"></createdDialog>
  </div>
</template>

<script>
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

import createdDialog from "./personDialog.vue"; //个人信息修改
export default {
  data() {
    return {
      link: "",
      username: "",
      dialogFormVisible: false,
      curMenu: {}, //当前一级路由
      curSubMenu: {}, //当前二级路由
      menu: [],
      menustate: "0",
      year: "",
      userData: {
        show: false
      },
      providerName: ''
    };
  },
  components: {
    createdDialog
  },
  methods: {
    handleZhuMenu (item) { //点击一级主菜单
      if (item.code !== this.curMenu.code) { //防止重复点击一级菜单
        this.curMenu = item
        this.$utils.setLocalStorage('curMenu',item)
        this.$utils.setLocalStorage('curSubMenu',item.children[0])
        this.$router.push({ path: item.children[0].url });
        this.curSubMenu = item.children[0]
      }
    },
    handleSubmenu (item) { //点击二级菜单
      if (item.code !== this.curSubMenu.code) {
        this.$router.push({ path: item.url });
        this.$utils.setLocalStorage('curSubMenu',item)
        this.curSubMenu = item
      }
    },
    handlePerson () {
      this.userData.show = true
    },
    exit() { //退出系统
      this.$router.push({ path: "/login" });
    }
  },
  mounted() {
    this.menu = this.$utils.getLocalStorage('menulist')
    this.link = this.$route.path;
    let userInfo = this.$utils.getLocalStorage('user')
    this.username = userInfo.name
    this.curMenu = this.$utils.getLocalStorage('curMenu')
    this.curSubMenu = this.$utils.getLocalStorage('curSubMenu')
    this.providerName = this.$utils.getLocalStorage('user').providerName
    console.log(this.providerName)
    // if (serviceArea) {
    //   let text = []
    //   serviceArea.forEach(el=>{
    //     text.push(CodeToText[el])
    //   })
    //   this.area = text.join(',')
    // }
    
  },
  watch: {
    $route(to, from) { //监听路由变化
      this.link = to.path;
    }
  }
};
</script>

<style>
html,
body {
  background: #f3f4f9!important;
}
.el-container {
  min-height: 100%;
}

.bottom-box {
  width: 100%;
  min-height: 100%;
  /* position: absolute; */
  top: 0;
}

.el-menu {
  border-right: none;
  height: 100%;
}

.top-right {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: rgba(55, 61, 65, 1);
  border-bottom: 3px #333 solid;
  color: #fff;
  z-index: 10;
  box-sizing: content-box;
}
.logo{
  float: left;
  margin-left: 12px;
  color: #E4E4E4;
  font-size: 30px;
  display:inline-block;
  line-height:50px!important;
}
.top-title {
  /* display: inline-block; */
  float: left;
  font-size: 18px;
  color: #E4E4E4;
  font-weight: bold;
  line-height: 50px!important;
  margin-left: 10px;
}

/* 事项样式修改 */
.shixiang-popover.el-popover{
  padding: 0
}
.shixiang-popover .el-popover__title{
  padding-left: 20px;
  background: #ececec;
  color: #646464;
  font-size: 12px;
  line-height: 36px
}
.shixiang-box{
  padding: 10px 20px 10px 20px;
  font-size: 12px;
}
.link-title{
  display: block;
  padding-left: 8px;
}
.link-title:before{
  content: ' ';
  position: absolute;
  top:5px;
  left: 0px;
  width: 4px;
  height: 4px;
  background-color: #909399;
  border-radius: 2px;
}
#homePage .el-badge__content.is-fixed{
  right: 9px;
  top: 16px;
  border: none;
}
.top-title-back{
  padding: 0 13px;
  margin-left: 15px;
  cursor: pointer;
  height: 50px;
  display: inline-block;
}
.top-title-back:hover{
  background: #333;
}


.top-head{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ececec;
  float: left;
  margin: 12px 5px 0 0;
}
#menu .el-menu-item, .el-submenu__title{
  height: 70px;
  line-height: 1;
}
#menu .el-menu-item{
  width: 80px;
  padding: 0!important;
}
.menu-icon{
  margin-top:15px;
  display: block;
  color: #ccc!important;
}
.menu-title{
  width:80px;
  margin-top:10px;
  color: #ccc;
  font-size: 12px;
}
.firstmenu{
  width: 80px;
  float: left;
  overflow-y: hidden;
  overflow-x: hidden;
}
.curMenuBack{
  background: #292c36!important;
}
.submenu-box{
  float:left;
  width:150px;
  background:#f3f4f7;
  min-height:100%;
  overflow-y: auto;
  border-right: #e4e4e4 solid 2px;
}
.submenu-box li{
  height: 51px;
  line-height: 51px;
  padding-left: 34px;
  font-size: 14px; 
  color: #666; 
  border-bottom: #e4e4e4 solid 1px;

}
.submenu-box .submenu-title{
  padding-left: 10px!important;
  background: #f2f2f2;
  font-weight: bold;
}
.submenu-box .submenu-router{
  cursor: pointer;
}
.submenu-box .submenu-router:hover{
  color: #409EFF;
}
.submenu-box .curSubMenu{
  background: #fff;
  color: #409EFF;
}
.arrow-left{
  position: absolute;
  color: rgb(255, 255, 255);
  top: 25px;
  z-index: 5;
  right: 5px;
  font-size: 20px;
}

.nav-link{
  position: fixed;
  top: 53px;
  width: 100%;
  z-index: 5;
  background: #fff;
  line-height: 52px!important;
  padding-left: 15px;
  height: 52px;
  border-bottom: #e5e5e5 solid 2px;
}
.el-badge{
  display: block;
}
.firstmenu::-webkit-scrollbar {/*滚动条整体样式*/
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.firstmenu::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #333744;
}
.firstmenu::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #333744;
}
</style>